<template>
  <div class="app-container">
    <div class="sumList">
      <div class="item">
        <div class="num">{{ totalObject.yesReportAmount || 0 }}</div>
        <div class="desc">已生成报告总金额</div>
      </div>
      <!-- <div class="item">
        <div class="num">{{ totalObject.totalIntegral || 0 }}</div>
        <div class="desc">总积分</div>
      </div>
      <div class="item">
        <div class="num">{{ totalObject.totalAmount || 0 }}</div>
        <div class="desc">总金额</div>
      </div> -->
      <div class="item">
        <div class="num">{{ totalObject.yesReport || 0 }}</div>
        <div class="desc">已生成报告数量</div>
      </div>
      <div class="item">
        <div class="num">{{ totalObject.noReport || 0 }}</div>
        <div class="desc">查无报告数量</div>
      </div>
    </div>
    <div class="app-title">查询条件</div>
    <div class="filter-container clearfix">
      <div class="searchItem">
        <label for="">用户ID</label>
        <el-input
          v-model="searchForm.userId"
          onkeyup="value=value.replace(/[^\d|^.]/g, '')"
          class="search-item"
          placeholder="请输入用户ID"
        />
      </div>
      <div class="searchItem">
        <label for="">创建时间</label>
        <el-date-picker
          v-model="dateTime"
          :range-separator="null"
          start-placeholder="创建时间"
          value-format="yyyy-MM-dd"
          class="search-item date-range-item"
          type="daterange"
          @change="fnTime"
        />
      </div>
      <div class="searchItem">
        <label for="">VIN</label>
        <el-input
          v-model="searchForm.vin"
          class="search-item"
          placeholder="请输入VIN"
        />
      </div>
      <div class="searchItem">
        <label for="">订单编号</label>
        <el-input
          v-model="searchForm.orderNo"
          class="search-item"
          placeholder="请输入订单编号"
        />
      </div>
      <div class="searchItem">
        <label for="">状态 :</label>
        <el-select v-model="searchForm.status" placeholder="全部" filterable>
          <el-option label="查询中" value="1" />
          <el-option label="已生成报告" value="2" />
          <el-option label="查无报告" value="0" />
        </el-select>
      </div>
      <div class="searchItem">
        <label for="">平台名称:</label>
        <el-select v-model="searchForm.application" placeholder="全部" @change="fnChange">
          <el-option label="全部" value="" />
          <el-option label="ebroker" value="00" />
          <el-option label="车E家" value="01" />
          <!-- <el-option label="车E家小程序" value="2" /> -->
        </el-select>
      </div>
      <div class="searchItem">
        <el-button
          v-hasPermission="['valuation:search']"
          class="searchItembtn"
          type="primary"
          @click="search"
        >
          {{ $t("common.search") }}
        </el-button>
        <el-button class="searchItembtn" type="success" @click="reset">
          {{ $t("table.reset") }}
        </el-button>
      </div>
    </div>
    <div class="app-title">vin码管理列表</div>
    <el-table
      ref="table"
      :key="tableKey"
      v-loading="loading"
      :data="list"
      border
      fit
      style="width: 100%"
    >
      <el-table-column
        label="序号"
        type="index"
        :show-overflow-tooltip="true"
        align="center"
        width="50px"
      />
      <el-table-column
        label="订单编号"
        prop="orderNo"
        :show-overflow-tooltip="true"
        align="center"
        min-width="80px"
      />
      <el-table-column
        label="支付方式"
        :show-overflow-tooltip="true"
        align="center"
        min-width="80px"
      >
        <template slot-scope="scope">
          <span>{{ ["支付宝", "微信"][scope.row.payWay] }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="支付时间"
        :show-overflow-tooltip="true"
        align="center"
        min-width="150px"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.payTime }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="VIN"
        :show-overflow-tooltip="true"
        align="center"
        min-width="150px"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.vin }}</span>
        </template>
      </el-table-column>
      <!-- <el-table-column
        label="行驶证"
        :show-overflow-tooltip="true"
        align="center"
        min-width="80px"
      >
        <template slot-scope="scope">
          <a
            v-if="isAssetTypeAnImage(scope.row.drivingLicenceUrl)"
            style="color: #00f"
            @click="openView(scope.row.drivingLicenceUrl)"
          >{{ scope.row.drivingLicenceUrl }}</a>
        </template>
      </el-table-column> -->
      <el-table-column
        label="用户id"
        :show-overflow-tooltip="true"
        align="center"
        prop="userId"
        min-width="80px"
      />
      <el-table-column
        v-if="false"
        label="手机号"
        :show-overflow-tooltip="true"
        align="center"
        prop="mobile"
        min-width="80px"
      />
      <el-table-column
        v-if="false"
        label="用户身份"
        :show-overflow-tooltip="true"
        align="center"
        min-width="150px"
      >
        <template slot-scope="scope">
          {{
            ["普通用户", "经纪人", "城市合伙人", "品牌合伙人"][
              scope.row.roleType
            ]
          }}
        </template>
      </el-table-column>

      <el-table-column
        label="消费金额(元)"
        :show-overflow-tooltip="true"
        align="center"
        min-width="150px"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.amount }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="平台"
        :show-overflow-tooltip="true"
        align="center"
        min-width="150px"
      >
        <template slot-scope="scope">
          <span v-if="scope.row.application">{{ scope.row.application == '00' ? "ebroker" : "车E家" }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="状态"
        :show-overflow-tooltip="true"
        align="center"
        min-width="80px"
      >
        <template slot-scope="scope">
          <span>{{
            ["查无报告", "查询中", "已生成报告"][scope.row.status]
          }}</span>
        </template>
      </el-table-column>
      <el-table-column
        :label="$t('table.operation')"
        align="center"
        min-width="150px"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="{ row }">
          <!-- <el-link
            v-if="row.status === 2"
            v-hasPermission="['usercenter:view']"
            class="el-icon-view"
            @click="look(row)"
          >
            查看报告
          </el-link> -->
          <el-link
            v-hasPermission="['usercenter:view']"
            class="el-icon-view"
            @click="view(row)"
          >
            查看详情
          </el-link>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="pagination.pageNum"
      :limit.sync="pagination.pageSize"
      @pagination="search"
    />
    <Dialog :id="lookId" :visible="dialogVisible" @fnClose="myclose" />
    <el-dialog title="" :visible.sync="viewDialogVisible" width="30%">
      <img :src="previewUrl" style="width: 100%">
    </el-dialog>
    <el-dialog title="价格设置" :visible.sync="editdialogVisible" width="60%">
      <el-form
        ref="ruleForm"
        :model="editForm"
        label-width="100px"
        class="demo-editForm"
      >
        <el-form-item label="现金价格" required="">
          <el-input
            v-model="editForm.price"
            :onkeyup="
              (editForm.price = editForm.price.replace(/[^0-9.]/gi, ''))
            "
            maxlength="8"
            style="width: 300px"
            placeholder="请输入现金价格"
            @blur="onBlur"
          />
        </el-form-item>
        <el-form-item>
          <el-button @click="editdialogVisible = false">返回</el-button>
          <el-button
            type="primary"
            @click="submitFormEdits()"
          >确认提交</el-button>
        </el-form-item>
      </el-form>
      <p style="font-size: 20px; font-weight: 600; margin-bottom: 10px">
        修改记录
      </p>
      <el-table
        ref="table"
        :key="tableKey"
        v-loading="loading"
        :data="list1"
        border
        fit
        style="width: 100%"
      >
        <el-table-column
          label="修改时间"
          :show-overflow-tooltip="true"
          align="center"
          prop="createTime"
          min-width="80px"
        />
        <el-table-column
          label="修改人"
          :show-overflow-tooltip="true"
          align="center"
          style="width: 50px"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.createUser }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="修改类型"
          :show-overflow-tooltip="true"
          align="center"
          min-width="150px"
        >
          <template slot-scope="scope">
            <span
              v-for="(item, i) in JSON.parse(scope.row.columnName)"
              :key="i"
            >
              {{ item.application }}
              {{ item.priority }}
              {{ item.toolName }}
              {{ item.classifyType }}
              {{ item.isUse }}
              {{ item.usePriority }}
              {{ item.imageUrlOpen }}
              {{ item.imageUrlClose }}
              {{ item.hrefUrl }}
              {{ item.status }}
              {{ item.payType }}
              {{ item.price }}
            </span>
          </template>
        </el-table-column>
        <el-table-column
          label="修改前"
          :show-overflow-tooltip="true"
          align="center"
          prop="columnValue"
          min-width="80px"
        >
          <template slot-scope="scope">
            <span
              v-for="(item, i) in JSON.parse(scope.row.columnValue)"
              :key="i"
            >
              {{ item.application?
                `平台名称${item.application =='00'?'erboker':'车E家'},`:'' }}
              {{ item.priority ? `工具排序优先级${item.priority},` : "" }}
              {{ item.toolName ? `工具名称:${item.toolName},` : "" }}
              {{ item.classifyType ? `分类类型\:${item.classifyType},` : "" }}
              {{ item.isUse ? `是否常用工具:${item.isUse},` : "" }}
              {{
                item.usePriority ? `常用工具排序优先级:${item.usePriority}` : ""
              }}
              {{ item.imageUrlOpen ? `工具开放图片:${item.imageUrlOpen}` : "" }}
              {{
                item.imageUrlClose ? `工具未开放图片:${item.imageUrlClose}` : ""
              }}
              {{ item.hrefUrl ? `跳转链接:${item.hrefUrl}` : "" }}
              {{
                item.status
                  ? `工具状态:${item.status == 1 ? "未开放" : "已开放"},`
                  : ""
              }}
              {{ item.payType ? `支付方式:${item.payType},` : "" }}
              {{ item.price ? `价格:${item.price}` : "" }}
            </span>
          </template>
        </el-table-column>
        <el-table-column
          label="修改后"
          :show-overflow-tooltip="true"
          align="center"
          prop="columnValueAfter"
          min-width="80px"
        >
          <template slot-scope="scope">
            <span
              v-for="(item, i) in JSON.parse(scope.row.columnValueAfter)"
              :key="i"
            >
              {{ item.application?
                `平台名称${item.application =='00'?'erboker':'车E家'},`:'' }}
              {{ item.priority ? `工具排序优先级${item.priority},` : "" }}
              {{ item.toolName ? `工具名称:${item.toolName},` : "" }}
              {{ item.classifyType ? `分类类型\:${item.classifyType},` : "" }}
              {{ item.isUse ? `是否常用工具:${item.isUse},` : "" }}
              {{
                item.usePriority ? `常用工具排序优先级:${item.usePriority}` : ""
              }}
              {{ item.imageUrlOpen ? `工具开放图片:${item.imageUrlOpen}` : "" }}
              {{
                item.imageUrlClose ? `工具未开放图片:${item.imageUrlClose}` : ""
              }}
              {{ item.hrefUrl ? `跳转链接:${item.hrefUrl}` : "" }}
              {{ item.status ? `工具状态:${item.status},` : "" }}
              {{ item.payType ? `支付方式:${item.payType},` : "" }}
              {{ item.price ? `价格:${item.price}` : "" }}
            </span>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="total2 > 0"
        :total="total2"
        :page.sync="paginations.pageNum"
        :limit.sync="paginations.pageSize"
        @pagination="search2"
      />
    </el-dialog>
  </div>
</template>

<script>
import Pagination from '@/components/Pagination'
import Dialog from './dialog.vue'
// import { Toast } from 'vant'
export default {
  components: {
    Pagination,
    Dialog
  },
  data() {
    return {
      submitFormEdit: true,
      viewDialogVisible: false,
      previewUrl: '',
      editForm: {
        price: ''
      },
      totalObject: {},
      searchForm: {
        vin: '',
        startTime: '',
        endTime: '',
        orderNo: '',
        userId: '',
        status: '',
        application: ''
      },
      pagination: {
        pageSize: 10,
        pageNum: 1
      },
      total: 0,
      loading: false,
      tableKey: 0,
      dateTime: '',
      list: [],
      lookId: 0,
      dialogVisible: false,
      editdialogVisible: false,
      paginations: {
        pageSize: 5,
        pageNum: 1
      },
      total2: 0,
      list1: []
    }
  },
  created() {
    this.getCarVinReportCount()

    this.search()
  },
  mounted() {
    console.log(document.querySelector('.contents'))
  },
  methods: {
    getCarVinReportCount() {
      this.$get(`/web/carVinReport/getCarVinReportCount?type=0&application=${this.searchForm.application}`).then((res) => {
        if (res.data.code === '0') {
          this.totalObject = res.data.data
        }
      })
    },
    fnTime(e) {
      this.getCarVinReportCount()
    },
    fnChange(e) {
      this.getCarVinReportCount()
    },
    view(row) {
      console.log(row)
      this.$router.push({
        name: 'vinDetail',
        query: {
          id: row.id
        }
      })
    },
    onBlur() {
      this.editForm.price = Number(this.editForm.price).toFixed(2)
    },
    search2() {},
    openView(url) {
      this.viewDialogVisible = true
      this.previewUrl = url
    },
    async search(e) {
      if (e && e.page) {
        this.pagination.pageNum = e.page
        this.pagination.pageSize = e.limit
      }
      if (this.dateTime) {
        this.searchForm.startTime = `${this.dateTime[0]}`
        this.searchForm.endTime = `${this.dateTime[1]}`
      }
      this.loading = true
      try {
        // /webzlh/reportBase/list/report?userNameOrMobile=13008800250&pageNum=1&pageSize=20
        const result = await this.$get('/web/carVinReport/getList', {
          ...this.pagination,
          ...this.searchForm,
          type: 0
        })
        if (result.data.code === '0') {
          this.loading = false
          this.list = result.data.data.rows
          this.total = result.data.data.total
        } else {
          this.loading = false
          this.$message.error(result.data.message)
        }
      } catch (error) {
        this.loading = false
      }
    },
    isAssetTypeAnImage(ext) {
      var index = ext.lastIndexOf('.')
      ext = ext.substr(index + 1)
      return (
        [
          'png',
          'jpg',
          'jpeg',
          'bmp',
          'gif',
          'webp',
          'psd',
          'svg',
          'tiff'
        ].indexOf(ext.toLowerCase()) !== -1
      )
    },
    reset() {
      Object.keys(this.searchForm).forEach((item) => {
        this.searchForm[item] = ''
      })
      this.dateTime = ''
      this.search()
      // this.brand()
    },
    look(row) {
      this.lookId = row.id
      this.dialogVisible = true
      // this.$get('web/carVinReport/getDetail?id=2').then(res => {
      //   console.log(res)
      // })
    },
    myclose() {
      this.dialogVisible = false
    },
    setPrice() {
      this.editdialogVisible = true
    }
  }
}
</script>

<style lang="scss" scoped>
.sumList {
  margin: 20px 10px;
  display: flex;
  justify-content: space-evenly;
  .item {
    width: 160px;
    height: 80px;
    border: 1px solid #ccc;
    border-radius: 20px;
    line-height: 36px;
    text-align: center;
  }
}
</style>
